<script lang="ts">
  import { DatePicker } from "@svelte-plugins/datepicker";
  import "./datepicker.css";
  import dayjs from "dayjs";
  import type { Snippet } from "svelte";

  interface Props {
    dayTime: number;
    showTimePicker?: boolean;
    children: Snippet<[]>;
    onChange: (newDayTime: number) => void;
    startTime?: number;
    endTime?: number;
    isOpen?: boolean;
    skipChild?: boolean;
  }

  let props: Props = $props();

  let dayTime = $state(props.dayTime);
  let isOpen = $state(props.isOpen ?? false);
</script>

<DatePicker
  bind:isOpen
  bind:startDate={dayTime}
  enableFutureDates
  enablePastDates
  showTimePicker={props.showTimePicker}
  startOfWeek={1}
  monthLabels={[
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月",
  ]}
  dowLabels={["周日", "周一", "周二", "周三", "周四", "周五", "周六"]}
  enabledDates={props.startTime != undefined && props.endTime != undefined
    ? [
        `${dayjs(props.startTime).format("MM/DD/YYYY")}:${dayjs(props.endTime).format("MM/DD/YYYY")}`,
      ]
    : undefined}
  onDateChange={() => props.onChange(dayTime)}
>
  {#if props.skipChild ?? false == false}
    <button type="button" class="btn p-0" onclick={() => (isOpen = true)}>
      {@render props.children()}
    </button>
  {/if}
</DatePicker>
